// component/openBook/openBook.js
import config from "../../config/config"
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		list: {
			value: [],
			type: Array
		},
		astrictNum: {
			value: 0,
			type: Number
		}
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		Width: 0,
		PageIndex: 0,
		Height: 0,
		isPause: false,
		scollTop: 5,
		timer: null,
		timerSkip: "",
		ZiMu: {}, //当前语音对应的字幕
		StartPoint: {
			x: 0,
			Y: 0
		},
		isMute: false,
		audio: null,
		BookAudio: null,
		text: "",
		isAutoPlay: true
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		AutoPlay() {
			this.data.isAutoPlay = true
			clearTimeout(this.data.timer)
			// this.data.timer = setTimeout(() => {
			// 	this.nextPage(this.data.PageIndex)
			// }, 5000)
		},
		// 播放音频
		playAudio() {
			this.data.isPause = false
			if (this.data.list[this.data.PageIndex].audio) {
				this.switchoverSound(this.data.list[this.data.PageIndex].audio)
			}
		},
		// 暂停音频
		pause() {
			this.data.audio.pause()
			this.data.isPause = true
		},
		// 停止自动播放
		stopPlay() {
			this.data.isAutoPlay = false
			clearTimeout(this.data.timer)
		},
		// 静音
		MuteFn() {
			if (this.data.audio) {
				this.data.audio.volume = 0
			}
			this.data.isMute = true
		},
		// 关闭静音
		MuteFnOff() {
			if (this.data.audio) {
				this.data.audio.volume = 1
			}
			this.data.isMute = false
		},


		initImageStrly() {
			this.data.list.forEach((item, index) => {
				console.log(this.data.Width)
				if (index == 0) {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;transform: translateX(${-this.data.Width}px);z-index:${((this.data.list.length-index)*2)}`
				} else {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:${((this.data.list.length-index)*2)}`
				}
				item.leftStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				item.rightBoxStyle =
					`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:${((this.data.list.length-index)*2-1)}`
				item.rightStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
			})
			if (this.data.list[0].audio) {
				this.switchoverSound(this.data.list[0].audio)
			}
			this.$set(this,"list",this.data.list)
			this.$set(this,"text",this.data.list[0].text)
			// this.setData({
			// 	list: this.data.list,
			// 	text: this.data.list[0].text
			// })


		},
		leftTouchEnd(e) {
			let L = e.touches[0].pageX - this.data.StartPoint.x
			if (L > 0 && Math.abs(L) > 20) {

				this.data.isAutoPlay = false
				let PageIndex = e.currentTarget.dataset.index
				if (PageIndex == 0) {
					wx.showToast({
						title: '前面没有了哦',
						icon: "none"
					})
					return
				}
			}
		},
		rightTouchEnd(e) {
			if (this.data.ismove) {
				return
			}
			let PageIndex = e.currentTarget.dataset.index
			let L = e.touches[0].pageX - this.data.StartPoint.x
			if ((L < 0 && Math.abs(L) > 1) || e.currentTarget.dataset.flag == "begin") {
				this.data.isAutoPlay = false
				this.nextPage(PageIndex)
			}
		},
		// 翻动下一页
		nextPage(PageIndex) {

			this.data.ismove = true
			if (this.data.astrictNum != 0 && PageIndex + 1 >= this.data.astrictNum) {
				wx.showToast({
					title: '后面被限制了哦',
					icon: "none"
				})
				this.data.ismove = false
				// this.triggerEvent("astrict", {
				// 	pageIndex: PageIndex,
				// 	isAutoPlay: this.data.isAutoPlay
				// })
				return
			}
			if (PageIndex >= this.data.list.length - 1) {
				wx.showToast({
					title: '后面没有了哦',
					icon: "none"
				})
				this.data.ismove = false
				this.triggerEvent("end", {})
				return
			}
			this.data.list.forEach((item, index) => {
				// 处理左边
				if (index == PageIndex) {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:0px;z-index:99`
					item.leftStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				} else if (index == PageIndex + 1) { //翻动的页面
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:101;transform-origin: ${this.data.Width}px 0; overflow: hidden;transform: rotate(-32deg)`
					item.leftStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;transform-origin: 0 0;transform: translateX(${this.data.Width}px) translateY(0px)`
				} else {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:${((this.data.list.length-index)*2)}`
					item.leftStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				}
				// 处理右边
				if (index == PageIndex) {
					item.rightBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:99`
					item.rightStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				} else if (index == PageIndex + 1) {
					item.rightBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height*2}px;position:absolute;left:${this.data.Width}px;top:0px;z-index:100;transform-origin: 0 0;transform: translateX(${this.data.Width}px) rotate(-32deg);overflow: hidden;`
					item.rightStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position: absolute;right: 0px;top:0px;transform-origin: 0 0;transform: rotate(32deg) translateX(-${this.data.Width}px)`
				} else {
					item.rightBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:${((this.data.list.length-index)*2-1)}`
					item.rightStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				}
			})
			this.setData({
				list: this.data.list
			})

			setTimeout(() => {
				this.data.list[PageIndex + 1].rightBoxStyle =
					`width:${this.data.Width}px;height:${this.data.Height*2}px;position:absolute;left:${this.data.Width}px;top:0px;z-index:100;transform-origin: 0 0;transform: translateX(0px) rotate(0deg);transition:transform 1s;overflow: hidden`
				this.data.list[PageIndex + 1].rightStyle =
					`width:${this.data.Width}px;height:${this.data.Height}px;position: absolute;right: 0px;top:0px;transform-origin: 0 0;transform: rotate(0deg) translateX(0px);transition:transform 1s;`

				this.data.list[PageIndex + 1].leftBoxStyle =
					`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:101;transform-origin:${this.data.Width}px 0; overflow: hidden; transform: translateX(-${this.data.Width}px) rotate(0deg);transition:transform 1s;`
				this.data.list[PageIndex + 1].leftStyle =
					`width:${this.data.Width}px;height:${this.data.Height}px;transform-origin: 0 0;transform: translateX(0px) rotate(0deg);;transition:transform 1s;`
				this.setData({
					list: this.data.list
				})
				this.setData({
					text: this.data.list[this.data.PageIndex].text,
					PageIndex: PageIndex + 1
				})
				// this.data.BookAudio.play()
				this.BookAudio()
				this.data.ismove = false
				this.triggerEvent("change", {
					pageIndex: PageIndex + 1,
					isAutoPlay: this.data.isAutoPlay
				})
				setTimeout(() => {
					if (this.data.list[this.data.PageIndex].audio && !this.data.isPause) {
						this.switchoverSound(this.data.list[this.data.PageIndex].audio)
					}
				}, 1000);
			}, 300)
		},
		// 翻动上一页
		previousPage(PageIndex) {
			this.data.ismove = true
			if (PageIndex <= 0) {
				wx.showToast({
					title: '前面没有了哦',
					icon: "none"
				})
				this.data.ismove = false
				return
			}
			this.data.list.forEach((item, index) => {
				// 处理左边
				if (index == PageIndex) {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:0px;z-index:99`
					item.leftStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				} else if (index == PageIndex - 1) {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height*2}px;position:absolute;left:0px;z-index:100;transform-origin: ${this.data.Width}px 0; transform: translateX(${-this.data.Width}px) rotate(32deg);overflow: hidden;`
					item.leftStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;transform-origin: ${this.data.Width}px 0;transform: rotate(-32deg) translateX(${this.data.Width}px) ;top:0`
				} else {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:${((this.data.list.length-index)*2)}`
					item.leftStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				}
				// 处理右边
				if (index == PageIndex) {
					item.rightBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:99`
					item.rightStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				} else if (index == PageIndex - 1) { //翻动的页面
					item.rightBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height*2}px;position:absolute;left:0px;top:0px;z-index:101;transform-origin: ${0}px 0;transform: rotate(32deg)`
					item.rightStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position: absolute;right: 0px;top:0px;transform-origin: 0 0;transform:translateX(${-this.data.Width}px)`
				} else {
					item.rightBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:${((this.data.list.length-index)*2-1)}`
					item.rightStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				}
			})
			this.setData({
				list: this.data.list
			})
			setTimeout(() => {
				this.data.list[PageIndex - 1].rightBoxStyle =
					`width:${this.data.Width}px;height:${this.data.Height*2}px;position:absolute;left:0px;top:0px;z-index:101;transform-origin: ${0}px 0;transform: translateX(${this.data.Width}px) rotate(0deg);transition:transform 1s;;overflow: hidden`
				this.data.list[PageIndex - 1].rightStyle =
					`width:${this.data.Width}px;height:${this.data.Height}px;position: absolute;right: 0px;top:0px;transform-origin: 0 0;transform:translateX(0px);transition:transform 1s; `
				this.data.list[PageIndex - 1].leftBoxStyle =
					`width:${this.data.Width}px;height:${this.data.Height*2}px;position:absolute;left:0px;z-index:100;transform-origin: ${this.data.Width}px 0; transform: translateX(0px) rotate(0deg);overflow: hidden;transition:transform 1s;`
				this.data.list[PageIndex - 1].leftStyle =
					`width:${this.data.Width}px;height:${this.data.Height}px;transform-origin: ${this.data.Width}px 0;transform: rotate(0deg) translateX(0px) ;top:0;transition:transform 1s;`
				this.setData({
					list: this.data.list
				})
				this.setData({
					text: this.data.list[this.data.PageIndex].text,
					PageIndex: PageIndex - 1
				})
				this.triggerEvent("change", {
					pageIndex: PageIndex - 1,
					isAutoPlay: this.data.isAutoPlay
				})
				this.data.audio.pause()
				// this.data.BookAudio.play()
				this.BookAudio()
				this.data.ismove = false
				setTimeout(() => {
					if (this.data.list[this.data.PageIndex].audio && !this.data.isPause) {
						this.switchoverSound(this.data.list[this.data.PageIndex].audio)
					}
				}, 1000);
			}, 300)
		},
		leftTouchEnd(e) {
			if (this.data.ismove) {
				return
			}
			let PageIndex = e.currentTarget.dataset.index
			let L = e.touches[0].pageX - this.data.StartPoint.x
			if (L > 0 && Math.abs(L) > 10) {

				this.previousPage(PageIndex)
			}
		},
		skip(PageIndex) {
			if (this.data.astrictNum != 0 && PageIndex >= this.data.astrictNum) {
				wx.showToast({
					title: '后面被限制了哦',
					icon: "none"
				})
				return
			}
			if (PageIndex == this.data.pageNum || PageIndex < 0 || PageIndex >= this.data.list.length) {
				return
			}
			this.data.audio.pause()
			this.data.list.forEach((item, index) => {
				if (index == PageIndex) {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:0px;z-index:100`
					item.rightBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:100`
				} else {
					item.leftBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:${((this.data.list.length-index)*2)}`
					item.rightBoxStyle =
						`width:${this.data.Width}px;height:${this.data.Height}px;position:absolute;left:${this.data.Width}px;z-index:${((this.data.list.length-index)*2-1)}`
				}
				item.leftStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
				item.rightStyle = `width:${this.data.Width}px;height:${this.data.Height}px`
			})
			// this.setData({
			// 	list: this.data.list,
			// 	PageIndex: PageIndex
			// })
			this.$set(this, 'list', this.data.list)
			this.$set(this, 'PageIndex', PageIndex)
			clearTimeout(this.data.timerSkip)
			this.data.timerSkip = setTimeout(() => {
				if (this.data.list[this.data.PageIndex].audio && !this.data.isPause) {
					this.data.audio.src = this.data.list[this.data.PageIndex].audio
					this.switchoverSound(this.data.list[this.data.PageIndex].audio)
				}
			}, 1000)
			// this.setData({
			// 	text: this.data.list[this.data.PageIndex].text,
			// })
			this.$set(this, 'text', this.data.list[this.data.PageIndex].text)
			this.$emit("change",{
				pageIndex: PageIndex,
				isAutoPlay: this.data.isAutoPlay
			})
			// this.triggerEvent("change", {
			// 	pageIndex: PageIndex,
			// 	isAutoPlay: this.data.isAutoPlay
			// })
		},

		TouchStart(e) {
			this.data.StartPoint.x = e.touches[0].pageX
			this.data.StartPoint.y = e.touches[0].pageY
		},
		whFn() {
			console.log(this.data.list)
			let that = this
			if (this.data.list.length == 0) {
				return
			}
			wx.getImageInfo({
				src: this.data.list[0].leftImg,
				success(res) {
					let SystemInfo = wx.getSystemInfoSync()
					let windowHeight = SystemInfo.windowHeight
					let windowWidth = SystemInfo.windowWidth
					if (windowWidth / 2 / res.width * res.height > windowHeight) { //图片的宽铺满后 高度大于 设备的高度
						that.setData({
							Height: windowHeight,
							Width: Math.floor(res.width / (res.height / windowHeight))
						})
					} else {
						that.setData({
							Height: Math.floor(res.height / (res.width / Math.floor(
								windowWidth / 2))),
							Width: Math.floor(windowWidth / 2)
						})
						console.log(Math.floor(windowWidth / 2))
					}
					that.initImageStrly()
				},
				fail(err) {
					console.log(err)
				}
			})
		},
		tidyTime(timeStr) {
			if (timeStr == undefined) {
				return
			}
			let time = []
			let timeArr = timeStr.split(":")
			time.push(timeArr[0])
			let timeArrTwo = timeArr[1].split(".")
			time.push(...timeArrTwo)
			return Number(time[0]) * 60 + Number(time[1])
		},
		switchoverSound(src) {
			if (!src) {
				this.data.audio.pause()
				return
			}
			if (wx.canIUse("createInnerAudioContext")) {
				if (this.data.audio) {
					this.data.audio.pause()
					this.data.audio.destroy()
				}
				this.data.audio = wx.createInnerAudioContext()
				this.data.audio.src = src
				this.data.audio.autoplay = true
				// this.data.audio.play()
				if (this.data.isMute) {
					this.data.audio.volume = 0
				} else {
					this.data.audio.volume = 1
				}
				this.data.audio.onEnded(() => {
					if (this.data.timer) {
						clearTimeout(this.data.timer)
						this.data.timer = null
					}
					if (this.data.isAutoPlay) {
						this.nextPage(this.data.PageIndex)
					}
				})
				// this.data.audio.onTimeUpdate((e) => {
				// 	let target = this.data.list[this.data.PageIndex].text
				// 	for (let index = target.length - 1; index < target.length; index--) {
				// 		let item = target[index]
				// 		let time = this.tidyTime(item.time)
				// 		if (this.data.audio.currentTime > time) {
				// 			if (this.data.ZiMu.text != item.text) {
				// 				this.data.ZiMu = item
				// 				this.triggerEvent("ZiMuChange", this.data.ZiMu)
				// 			}
				// 			break
				// 		}
				// 	}
				// })
			} else {
				wx.showToast({
					title: '微信版本过低，请升级微信客户端',
					icon: "none"
				})
			}

		},
		BookAudio() {
			let audio = wx.createInnerAudioContext()
			audio.src = config.imgUrl + "book.mp3"
			audio.autoplay = true
		},

		destroy() {
			this.data.audio.destroy()
		}
	},

	lifetimes: {
		attached() {
			this.whFn()
		},
		moved() {
			this.MuteFn()
			this.stopPlay()
			this.destroy()
		},
		detached() {
			this.MuteFn()
			this.stopPlay()
			this.destroy()
		}

	}
})
